<template>
  <div class="system-user-dialog-container">
    <el-dialog :close-on-click-modal="false" :title="dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')"
               draggable v-model="visible" width="600">
      <el-form :model="dataForm" :rules="dataRules" label-width="90px" ref="dataFormRef" v-loading="loading">
        <el-row :gutter="20">
          <el-col :span="12" class="mb-6">
            <el-form-item :label="$t('bar.barcode')" prop="barcode">
              <el-input v-model="dataForm.barcode" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb-6">
            <el-form-item :label="$t('bar.warehouse')" prop="warehouseName">
              <el-input clearable disabled v-model="dataFormReadOnly.warehouseName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb-6">
            <el-form-item :label="$t('bar.materialname')" prop="id">
              <!--<el-select filterable clearable v-model="dataForm.materialId" @change="materialChange" >
                <el-option :key="item.id" :label="item.realMaterialName" :value="item.id" v-for="item in materialData">
                  <span style="float:left;">{{ item.realMaterialName }}</span>
                  <span style="float:left;margin-left: 10px">{{ item.materialCode }}</span>
                  <span style="float:left;margin-left: 10px">{{ item.specification }}</span>
                </el-option>
              </el-select>-->
              <MaterialSelect @change="materialChange" v-model="dataForm.materialCode" :page-list="getPagedSpMaterials" />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb-6">
            <el-form-item :label="$t('bar.materialspec')" prop="materialSpec">
              <el-input clearable disabled v-model="dataFormReadOnly.materialSpec"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb-6">
            <el-form-item :label="$t('bar.location')" prop="locationId">
              <el-select filterable clearable v-model="dataForm.locationId">
                <el-option :key="item.id" :label="item.locationName" :value="item.id" v-for="item in locationData">
                  <span style="float:left;">{{ item.locationName }}</span>
                  <span style="float:left;margin-left: 10px">{{ item.locationCode }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb-6">
            <el-form-item :label="$t('bar.Qty')" prop="Qty">
              <el-input clearable v-model="dataForm.Qty" type="number" disabled></el-input>
            </el-form-item>
          </el-col> 
        </el-row>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="visible = false" icon="close">{{ $t('common.cancelButtonText') }}</el-button>
					<el-button @click="onSubmit" type="primary" icon="check" :disabled="loading">{{
              $t('common.confirmButtonText')
            }}</el-button>
				</span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" name="spDialog" setup>
import {useMessage} from '/@/hooks/message';
import { getSpBarcode,getSpWarehouse,getSpMaterials,getSpLocations,createSPBarcode,getPagedSpMaterials} from '/@/api/platform/wms/sp';
import { ref,reactive } from 'vue';
import MaterialSelect from '/@/components/mes/select/MaterialSelect.vue';

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);
const materialData = ref<any[]>([]);
const locationData = ref<any[]>([]);
const loading = ref(false);
import {useI18n} from 'vue-i18n';
import { pageList } from '/@/api/admin/user';
const {t} = useI18n();
// 通知父组件刷新
const emit = defineEmits(['refresh']);

const dataForm = reactive({
  barcode: '',
  materialId: '',
  locationId: '',
  Qty: '0'
});

const dataFormReadOnly=reactive({
  warehouseName:'',
  materialSpec:''
})
const dataRules = ref({
  materialId: [
    {required: true, message: t('bar.cannotEmpty'), trigger: 'blur'},
  ],
  locationId: [
    {required: true, message: t('bar.cannotEmpty'), trigger: 'blur'},
  ]
});

// 打开弹窗
const openDialog = async (id: string) => {
  visible.value = true;

  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });

  getBarcode();
  getWarehouse();
  getMaterials();
  getLocations();
};
// 获取标签号
const getBarcode = () => {
  getSpBarcode({ruleCode:"Hardware"}).then((res) => {
    if(res.data.item1){
      dataForm.barcode = res.data.item2;
    }
    else{
      useMessage().error(res.data.item2);
    }
    
  });
};
// 获取仓库
const getWarehouse = () => {
  getSpWarehouse().then((res) => {
    dataFormReadOnly.warehouseName =res.data.warehouseName+'('+res.data.warehouseCode+')';
    
  });
};
// 获取物料
const getMaterials = () => {
  getSpMaterials().then((res) => {
    materialData.value =res.data;
    
  });
};
// 获取货位
const getLocations = () => {
  getSpLocations().then((res) => {
    locationData.value =res.data;
    
  });
};
const materialChange=(value)=>{
  if(value==null){
    dataFormReadOnly.materialSpec=null;
    return;
  }
  console.log(value);
  //let filteredMaterial = materialData.value.filter(material=>material.id==value);
  //console.info(filteredMaterial);
  dataFormReadOnly.materialSpec=value.specification;
  dataForm.materialId=value.id;
}
// 提交
const onSubmit = async () => {
  const valid = await dataFormRef.value.validate().catch(() => {
  });
  if (!valid) return false;

  try {
      loading.value = true;
      console.log(dataForm);
      await createSPBarcode(dataForm).then((res)=>{
        if(!res.ok){
          useMessage().error(res.data);
        }
      });
      visible.value = false; // 关闭弹窗
      emit('refresh');
  } catch (error: any) {
    useMessage().error(error.msg);
  } finally {
    loading.value = false;
  }
};

// 暴露变量
defineExpose({
  openDialog,
});
</script>
